<!-- 订单详情 -->
<template>
	<container
		class="order-detail"
		:isNoData="isNodata"
		:isLoading="loading && this.orderInfo.id !== 'undefined'"
		@btnClick="init"
		:nodataOption="{
			type: 'hasbtn',
			iconBottom: '40rpx',
			text: '无数据',
			btnText: '刷新'
		}"
	>
		<mescroll-body
			ref="mescrollRef"
			@init="mescrollInit"
			:down="{
				auto: false,
				bgColor: '#fff'
			}"
			:up="{
				auto: false,
				use: false
			}"
			@down="downLoad"
		>
			<view class="act-status">
				<view class="act-status-act">
					<image class="icon" v-if="actStatus.icon" :src="actStatus.icon" mode=""></image>
					<text class="text" v-if="actStatus.text">{{ actStatus.text }}</text>
					<text class="text" v-else>{{ actStatus }}</text>
				</view>
				<view class="timeRemain">{{ timeRemain }}</view>
				<view class="order-steps">
					<steps :items="orderSteps" spacing="190rpx" :activeSteps="actSteps" :titleSize="26" activeColor="#FFA723" deactiveColor="#DFE0E5"></steps>
				</view>
			</view>
			<view class="order-content">
				<view class="address-select">
					<!-- 收货地址选择 -->
					<image class="icon" src="/static/loc-s.png" mode=""></image>
					<view class="address-content">
						<view class="user">
							<text class="user-name">{{ orderInfo.address }}</text>
							<text class="user-phone">{{ orderInfo.iphone }}</text>
						</view>
						<text class="address-text">{{ orderInfo.city }}-{{ orderInfo.county }} {{ orderInfo.address }}</text>
					</view>
				</view>
				<view class="good-close-card">
					<!-- 商品结算卡片 -->
					<view class="goods-list">
						<navigator class="good-item" :url="'/pages/goods/goods?name=' + item.name" hover-class="none" :key="index" v-for="(item, index) in orderInfo.goodsList">
							<goods-item
								type="cross"
								:name-size="36"
								:name-row-num="2"
								:good-num="item.buyCount"
								:img="imgHost + item.goodsPic"
								:img-width="'150rpx'"
								:img-height="'200rpx'"
								:price="item.goodsPrise"
								:name="item.goodsName"
							></goods-item>
						</navigator>
					</view>
					<view class="info-list">
						<uniForms class="form">
							<!-- <formListItem class="item" :label-width="150" :label="'买家备注'" placeholder="未填写" :input-text-align="'right'" :value="closeInfo.note"></formListItem> -->
							<!-- <formListItem
							class="item"
							:label-width="150"
							:read-only="true"
							:label="'优惠券'"
							placeholder="未填写"
							:input-text-align="'right'"
							:value="closeInfo.phone"
						></formListItem> -->
							<formListItem
								class="item"
								:label-width="150"
								:read-only="true"
								:label="'商品总额'"
								placeholder="未填写"
								:input-text-align="'right'"
								:value="orderInfo.goodsPrice"
							></formListItem>
							<formListItem
								class="item"
								:read-only="true"
								:label-width="150"
								:label="'配送费'"
								placeholder="未填写"
								:input-text-align="'right'"
								:value="orderInfo.orderFreight || '免费'"
							></formListItem>
							<!-- <formListItem
							class="item"
							type="route"
							:route-link="''"
							:read-only="true"
							:arrow-show="true"
							:label-width="150"
							:label="'发票信息'"
							placeholder="未填写"
							:input-text-align="'right'"
							:value="closeInfo.invoice"
						></formListItem> -->
						</uniForms>
					</view>
					<view class="total">
						<view class="numerical">
							<text class="total-num">共{{ orderInfo.goodsCounts }}件</text>
							<view class="sumpay">
								<text class="label">小计</text>
								<text class="symbol">¥</text>
								<text class="num">{{ orderInfo.orderPrice }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="order-info">
					<uniForms class="form">
						<formListItem
							class="item"
							:label-width="150"
							:read-only="true"
							:label="'订单编号'"
							placeholder="未填写"
							:input-text-align="'right'"
							:value="orderInfo.orderNo"
						></formListItem>
						<formListItem
							class="item"
							:label-width="150"
							:read-only="true"
							:label="'下单时间'"
							placeholder="未填写"
							:input-text-align="'right'"
							:value="orderInfo.createTime"
						></formListItem>
						<formListItem
							class="item"
							:read-only="true"
							:label-width="150"
							:label="'支付时间'"
							placeholder="未支付"
							:input-text-align="'right'"
							:value="orderInfo.payDate"
						></formListItem>
						<formListItem
							v-if="orderInfo && orderInfo.jpOrdersInvoice && orderInfo.jpOrdersInvoice.invoiceTitle"
							class="item"
							type="route"
							:route-link="''"
							:read-only="true"
							:label-width="150"
							:label="'发票抬头'"
							placeholder="未填写"
							:input-text-align="'right'"
							:value="orderInfo.jpOrdersInvoice.invoiceTitle"
						></formListItem>
						<formListItem
							v-if="orderInfo && orderInfo.jpOrdersInvoice && orderInfo.jpOrdersInvoice.invoiceTaxNo"
							class="item"
							type="route"
							:route-link="''"
							:read-only="true"
							:label-width="150"
							:label="'发票税号'"
							placeholder="未填写"
							:input-text-align="'right'"
							:value="orderInfo.jpOrdersInvoice.invoiceTaxNo"
						></formListItem>
						<formListItem
							v-if="orderInfo && orderInfo.jpOrdersInvoice && orderInfo.jpOrdersInvoice.invoicEmail"
							class="item"
							type="route"
							:route-link="''"
							:read-only="true"
							:label-width="150"
							:label="'发票邮箱'"
							placeholder="未填写"
							:input-text-align="'right'"
							:value="orderInfo.jpOrdersInvoice.invoicEmail"
						></formListItem>
						<formListItem
							class="item"
							type="route"
							:route-link="''"
							:read-only="true"
							:label-width="150"
							:label="'付款方式'"
							placeholder="未填写"
							:input-text-align="'right'"
							:value="'微信支付'"
						></formListItem>
						<formListItem
							v-if="orderInfo && orderInfo.messageInfo"
							class="item"
							type="route"
							:route-link="''"
							:read-only="true"
							:label-width="150"
							:maxlength="250"
							:label="'备注'"
							placeholder="未填写"
							:input-text-align="'right'"
							:value="orderInfo.messageInfo"
						></formListItem>
					</uniForms>
				</view>
			</view>
			<view class="detail-tools">
				<button class="btn btn-orange-line" v-if="orderStatus == 3 || orderStatus == 5" @click="popOpen">删除订单</button>
				<button class="btn btn-orange-line" v-if="orderStatus == 0" @click="popOpen">取消订单</button>
				<button class="btn btn-orange" v-if="orderStatus == 2" @click="popOpen">确认送达</button>
				<button class="btn btn-orange" v-if="orderStatus == 1 || (orderStatus == 2) | (orderStatus == 3)" @click="goToAftersale">申请售后</button>
				<button class="btn btn-orange" v-if="orderStatus == 0" @click="goToPay">立即支付</button>
			</view>
			<uni-popup ref="popup" type="center">
				<uni-popup-dialog
					v-if="orderStatus == 0"
					mode="base"
					title="取消订单"
					content="确定要取消订单吗?"
					:duration="2000"
					:before-close="true"
					@close="popClose"
					@confirm="cancelConfirm"
				></uni-popup-dialog>
				<uni-popup-dialog
					v-if="orderStatus == 3 || orderStatus == 5"
					mode="base"
					title="删除订单"
					content="确定要删除订单吗?"
					:duration="2000"
					:before-close="true"
					@close="popClose"
					@confirm="removeConfirm"
				></uni-popup-dialog>
				<uni-popup-dialog
					v-if="orderStatus == 2"
					mode="base"
					title="确认送达"
					content="确定已收到货吗?"
					:duration="2000"
					:before-close="true"
					@close="popClose"
					@confirm="deliveryConfirm"
				></uni-popup-dialog>
			</uni-popup>
		</mescroll-body>
	</container>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupDialog from '@/components/uni-popup-dialog/uni-popup-dialog.vue';
import uniForms from '@/components/uni-forms/uni-forms.vue';
import formListItem from '@/components/form-list-item/form-list-item.vue';
import steps from '@/components/steps/steps.vue';
import goodsItem from '@/components/goods-item/goods-item.vue';
import container from '@/components/container/container.vue';
export default {
	mixins: [MescrollMixin],
	components: {
		uniPopup,
		uniPopupDialog,
		uniForms,
		formListItem,
		steps,
		goodsItem,
		container
	},
	data() {
		return {
			loading: false,
			imgHost: this.$imgHost,
			id: '', //订单id
			orderNo: '', //订单号
			orderStatuses: this.$store.state.orderModule.orderStatus, //订单状态列表
			timePlayer: null, //关闭定时器
			timeRemain: '', //剩余时间
			// [
			// 	{
			// 		label: '全部',
			// 		val:-1
			// 	},
			// 	{
			// 		label: '待付款',
			// 		val:0
			// 	},
			// 	{
			// 		label: '待发货',
			// 		val:1
			// 	},
			// 	{
			// 		label: '待收货',
			// 		val:2
			// 	},
			// 	{
			// 		label: '已完成',
			// 		val:3
			// 	},
			// 	{
			// 		label: '退款／售后',
			// 		val:4
			// 	},
			// 	{
			// 		label: '已关闭',
			// 		val:5
			// 	}
			// ],
			// actStatus: {
			// 	// 当期状态
			// 	icon: '/static/1_22.png',
			// 	text: '订单待发货'
			// },
			// actSteps: 1, //当期步骤
			orderSteps: [
				{
					//步骤项
					title: '已付款',
					icon: '/static/1_20.png',
					activeIcon: '/static/1_07.png'
				},
				{
					title: '已发货',
					icon: '/static/1_11.png',
					activeIcon: '/static/1_24.png'
				},
				{
					title: '已收货',
					icon: '/static/1_22.png',
					activeIcon: '/static/1_09.png'
				},
				{
					title: '已完成',
					icon: '/static/1_13.png',
					activeIcon: '/static/1_26.png'
				}
			],
			// goodList: [
			// 	{
			// 		img: '/static/pic4.png',
			// 		price: 3199,
			// 		orgprice: 3299,
			// 		name: '华为po30',
			// 		moneySymbol: '¥',
			// 		content: 'Huawei/华为MatePad Pro平板电脑笔记本二合一新品轻薄全面屏影音无线充电'
			// 	}
			// ],
			// closeInfo: {
			// 	//结算信息
			// 	note: '', //备注
			// 	total: '', //商品总额
			// 	postage: '', //配送费
			// 	invoice: '' //发票信息
			// },
			orderInfo: {
				// address: "榄树排东街"
				// beginTime: null
				// billType: 0
				// billwayNo: null
				// buyAddressId: null
				// buyId: 3
				// buyNickname: "18202074132"
				// calcelDetaila: null
				// calcelId: null
				// city: "广州市"
				// county: "黄埔区"
				// createBy: "18202074132"
				// createTime: "2021-01-13 09:07:24"
				// endTime: null
				// fastMail: null
				// goodsCounts: 1
				// goodsList: [{…}]
				// goodsPrice: 0
				// id: "19"
				// iphone: "18202074132"
				// jpOrdersInvoice: null
				// logList: null
				// messageInfo: ""
				// orderFreight: null
				// orderNo: "6748302413674840064"
				// orderPrice: 0.01
				// orderState: 0
				// params: {}
				// payType: 0
				// pickType: 0
				// province: "广东省"
				// remark: null
				// returnType: 0
				// searchValue: null
				// stockType: 0
				// takeName: null
				// updateBy: ""
				// updateTime: null
			}
		};
	},
	computed: {
		isNodata() {
			return this.orderInfo.id != undefined && this.orderInfo.id != null ? false : true;
		},
		orderStatus() {
			// 订单状态
			return this.orderInfo.orderState;
		},
		actStatus() {
			// 当前状态

			switch (this.orderStatus) {
				case 0:
					return {
						// 当期状态
						icon: '/static/1_20.png',
						text: '订单待付款'
					};
					break;
				case 1:
					return {
						// 当期状态
						icon: '/static/1_22.png',
						text: '订单待发货'
					};
					break;
				case 2:
					return {
						// 当期状态
						icon: '/static/1_11.png',
						text: '订单已发货待接收'
					};
					break;
				case 3:
					return {
						// 当期状态
						icon: '/static/1_13.png',
						text: '订单已完成'
					};
					break;
				case 4:
					return '售后';
					break;
				case 5:
					return '已关闭';
					break;
				default:
					return null;
			}
		},
		actSteps() {
			// 当前步骤
			// switch (this.orderStatus) {
			// 	case 0: //订单待付款
			// 		return -1
			// 		break;
			// 	case 1:
			// 		return 0
			// 		break;
			// 	case 2:
			// 		return 1
			// 		break;
			// 	case 3:
			// 		return 2
			// 		break;
			// 	case 4:
			// 		return '已关闭'
			// 		break;
			// 	case 5:
			// 		return '售后'
			// 		break;
			// 	default:
			// 		return null;
			// }
			return this.orderStatus - 1;
		}

		// orderSteps(){

		// 	orderSteps: [
		// 		{
		// 			//步骤项
		// 			title: '已付款',
		// 			icon: '/static/1_20.png',
		// 			activeIcon: '/static/1_07.png'
		// 		},
		// 		{
		// 			title: '已发货',
		// 			icon: '/static/1_11.png',
		// 			activeIcon: '/static/1_24.png'
		// 		},
		// 		{
		// 			title: '已收货',
		// 			icon: '/static/1_22.png',
		// 			activeIcon: '/static/1_09.png'
		// 		},
		// 		{
		// 			title: '已完成',
		// 			icon: '/static/1_13.png',
		// 			activeIcon: '/static/1_26.png'
		// 		}
		// 	],
		// }
	},
	watch: {
		'orderInfo.closeTime': function(newVal, oldVal) {
			console.log('剩余时间', this.orderInfo.closeTime);
			if (this.orderInfo.closeTime) {
				if (this.timePlayer) clearInterval(this.timePlayer);
				let work = () => {
					let closeTime = this.$Moment(this.orderInfo.closeTime);
					let now = this.$Moment();

					//计算时间差并转换成标准时间单位

					let dura = closeTime.format('x') - now.format('x');

					let tempTime = this.$Moment.duration(dura);

					// let day = tempTime.days(); //是（实际天数%30），例如相差36天，计算成6。以下类推
					let hours = tempTime.hours();
					let minutes = tempTime.minutes();
					this.timeRemain = `剩余: ${minutes}分钟`;
					if (minutes < 0 || minutes == 0) {
						clearInterval(this.timePlayer);
						this.init();
					}
					// console.log('剩余时间', day, hours, minutes);
				};
				work();
				this.timePlayer = setInterval(work, 10000);
			}
		}
	},
	methods: {
		init() {
			this.loading = true;
			this.getOrderInfo()
				.then(res => {
					this.loading = false;
				})
				.catch(err => {
					this.loading = false;
				});
		},
		downLoad() {
			console.log('onPullDownRefresh');
			this.getOrderInfo()
				.then(res => {
					this.mescroll.endSuccess();
				})
				.catch(err => {
					this.mescroll.endErr();
				});
		},
		getOrderInfo() {
			this.loading = true;
			return this.$store
				.dispatch('getOrderInfo', { id: this.id, orderNo: this.orderNo })
				.then(res => {
					console.log('获取订单详细信息成功', res);
					this.loading = false;
					let data = res.data.data;
					this.orderInfo = data;
				})
				.catch(err => {
					this.loading = false;
				});
		},
		popOpen() {
			// 弹窗弹出
			this.$refs.popup.open();
			console.log('打开窗口');
		},
		popClose(done) {
			// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
			console.log('关闭');
			done();
		},

		/**
		 * 取消确认
		 * @param {Object} done
		 * @param {Object} value
		 */
		cancelConfirm(done, value) {
			// 输入框的值
			// TODO 做一些其他的事情，手动执行 done 才会关闭对话框

			this.$store
				.dispatch('cancelOrder', {
					orderNo: this.orderNo
				})
				.then(res => {
					console.log('取消订单', res);

					setTimeout(() => {
						uni.showToast({
							icon: 'success',
							mask: true,
							duration: 2000,
							title: '取消成功'
						});
					}, 500);
					setTimeout(() => {
						uni.redirectTo({
							url: `/pages/order/order-list?currentTab=5`
						});
					}, 2000);
				});
			done();
		},

		removeConfirm(done, value) {
			// 删除确认
			this.$store
				.dispatch('removeOrder', {
					orderNo: this.orderNo
				})
				.then(res => {
					console.log('删除订单', res);
					setTimeout(() => {
						uni.showToast({
							icon: 'success',
							mask: true,
							title: '删除成功',
							duration: 2000
						});
					}, 500);

					setTimeout(() => {
						uni.redirectTo({
							url: `/pages/order/order-list?currentTab=5`
						});
					}, 2000);
				});
			done();
		},

		/**
		 * 送达确认
		 * @param {Object} done
		 * @param {Object} value
		 */
		deliveryConfirm(done, value) {
			// 确认送达提交
			this.$store
				.dispatch('confirmOrder', {
					orderNo: this.orderNo
				})
				.then(res => {
					console.log('确认送达', res);
					this.getOrderInfo();
				});
			done();
		},
		goToAftersale() {
			// 去售后
			this.$store.commit('setAftersaleOrderInfo', this.orderInfo);
			uni.navigateTo({
				url: `/pages/aftersale/aftersale-apply?id=${this.id}&orderNo=${this.orderNo}&orderState=${this.orderInfo.orderState}`
			});
		},
		// goToCancel() {
		// 	// 去取消
		// 	this.$store.commit('setAftersaleOrderInfo', this.orderInfo);
		// 	uni.navigateTo({
		// 		url: `/pages/aftersale/aftersale-apply-detail?id=${this.id}&orderNo=${this.orderNo}&type=cancel`
		// 	});
		// },
		goToPay() {
			// 去支付
			let goodList = [];
			goodList = this.orderInfo.goodsList.map(item => {
				return {
					goodsId: item.goodsId,
					commodityName: item.goodsName,
					commodityPic: item.goodsPic,
					sellPrice: item.goodsPrise,
					buyCount: item.buyCount,
					postage: item.postage,
					freeMailStatus: item.freeMailStatus
				};
			});
			this.$store.commit('setBuyGoods', goodList);
			uni.navigateTo({
				url: `/pages/order/order-place?type=continue&orderNo=${this.orderInfo.orderNo}&orderFreight=${this.orderInfo.orderFreight}`
			});
		}
	},
	onLoad(option) {
		if (option.id) this.id = option.id;
		if (option.orderNo) this.orderNo = option.orderNo;
		this.init();
	}
};
</script>

<style lang="scss" scoped>
.order-detail {
	margin-bottom: 100rpx;
	.order-steps {
		// padding-bottom: 20rpx;

		margin-top: 50rpx;
	}
	.order-content {
		padding: 0rpx 20rpx 20rpx 20rpx;
	}
	.order-info {
		// border-bottom: 2rpx solid #efeff0;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 6px;
		.form {
			width: 100%;
			box-sizing: border-box;
			padding: 0rpx 20rpx;
			.item {
				display: flex;
				width: 100%;
				padding: 0rpx 20rpx;
				background-color: #fff;
				box-sizing: border-box;
			}
			.item:nth-child(1) {
				border-radius: 8px 8px 0px 0px;
			}
			.item:nth-last-child(1) {
				border-radius: 0px 0px 8px 8px;
			}
			.item:nth-last-child(n + 2) {
				border-bottom: 2rpx solid #efeff0;
			}
		}
	}

	.timeRemain {
		text-align: center;
		margin-top: 10rpx;
		font-size: 28rpx;
		color: #ffa723;
		font-weight: bolder;
	}
}
</style>
